<template>
  <el-container>
    <el-main>
      <el-card>
        <el-form :model="queryForm" :ref="queryForm" label-width="80px">
          <el-row :span="24" type="flex" style="width: 90%; margin: auto">
            <!--校区-->
            <el-col :span="8">
              <el-form-item label="校区" label-width="80px">
                <el-select v-model="queryForm.campus" placeholder="请选择校区"
                           @change="changeCampus">
                  <el-option
                      :value="null"
                      label="全部校区"
                      style="text-align: center"
                  ></el-option>
                  <el-option
                      v-for="item in campusList"
                      :key="item.id"
                      :label="item.campusName"
                      :value="item.id"
                      style="text-align: center"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会议室">
                <!-- 会议室选择 -->
                <el-select
                    v-model="queryForm.conferenceRoomId"
                    filterable
                    :disabled="queryForm.campus === null"
                    placeholder="请选择会议室"
                    @change="fetch"
                >
                  <el-option
                      :value="null"
                      label="全部会议室"
                  ></el-option>
                  <el-option
                      v-for="item in roomList"
                      :key="item.id"
                      :label="item.roomName"
                      :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="会议主题" label-width="80px">
                <el-input
                    placeholder="请输入会议主题"
                    @keydown.enter="fetch"
                    v-model="queryForm.topic"
                >
                  <template v-slot:prefix>
                    <el-icon>
                      <el-icon-search/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table stripe :data="tableData.rows">
          <el-table-column prop="topic" label="会议主题" min-width="180"></el-table-column>
          <el-table-column prop="conferenceRoomId" label="会议室"  min-width="180">
            <template v-slot="scope">
              {{ getRoomName(scope.row.conferenceRoomId) }}
            </template>
          </el-table-column>
          <el-table-column prop="conferenceDate" label="日期" min-width="100"></el-table-column>
          <el-table-column label="时间" min-width="100">
            <template v-slot="scope">
              {{ scope.row.startTime }}-{{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="记录人" min-width="100"></el-table-column>
          <el-table-column prop="createTime" label="记录时间" min-width="140"></el-table-column>
          <el-table-column prop="updateName" label="修改人" min-width="100"></el-table-column>
          <el-table-column prop="updateTime" label="修改时间" min-width="140"></el-table-column>
          <el-table-column label="会议纪要" min-width="140px">
            <template v-slot="scope">
              <el-button v-if="scope.row.summaryId" @click="previewSummary(scope.row)" text size="small" type="primary">
                查看
              </el-button>
              <el-button v-if="scope.row.summaryId" @click="editSummary(scope.row)" text size="small" type="primary">编辑
              </el-button>
              <el-button v-else text @click="addSummary(scope.row)" size="small" type="primary">添加</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="+tableData.total"
            :page-size="queryForm.pageSize"
            :page-sizes="[5, 10]"
            :current-page="queryForm.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-card>
    </el-main>
  </el-container>
  <el-dialog class="summary-dialog" v-model="summaryDialog.visible" destroy-on-close @close="fetch">
    <template #title>
      <div class="summary-dialog-title">
          <span class="status">会议纪要-{{
              getStatusText(summaryDialog.status)
            }}</span>
        <span class="topic">会议主题：{{ summaryDialog.topic }}</span>
        <span></span>
      </div>
    </template>
    <SummaryDetails
        :status="summaryDialog.status"
        :id="summaryDialog.id"
        :conference-id="summaryDialog.conferenceId"
        v-model:visible="summaryDialog.visible"
    />
  </el-dialog>
</template>

<script>
import {PageSummary} from "@/api/index.js";
import SummaryDetails from "@/components/SummaryDetails.vue";

export default {
  components: {SummaryDetails: SummaryDetails},
  props: {},
  data() {
    return {
      tableData: {
        total: 0,
        rows: []
      },
      queryForm: {
        page: 1,
        limit: 10,
        topic: '',
        campus: this.$store.getters.getUserCampus,
        conferenceRoomId: '',
      },
      summaryDialog: {
        visible: false,
        id: '',
        conferenceId: '',
        status: '',
        topic: '',
      },
      roomList: [],
    }
  },
  computed: {
    campusList() {
      return this.$store.getters.getCampusList;
    },
    conferenceRoomList() {
      return this.$store.getters.getConferenceRoomList;
    },
    role() {
      return this.$store.getters.getRole;
    }
  },
  created() {
    this.changeCampus()
    this.fetch()
  },
  methods: {
    getRoomName(roomId) {
      const room = this.conferenceRoomList.find((item) => item.id === roomId);
      console.log(room)
      return room ? room.roomName : '未知房间'
    },

    changeCampus() {
      this.fetch()
      this.queryForm.conferenceRoomId = null;
      this.roomList = this.conferenceRoomList.filter(room => room.campus === this.queryForm.campus)
    },
    // 获取会议总结列表
    fetch() {
      PageSummary(this.queryForm).then(res => {
        this.tableData = res.data
      })
    },
    previewSummary(row) {
      this.summaryDialog = {
        visible: true,
        id: row.summaryId,
        conferenceId: row.conferenceId,
        topic: row.topic,
        status: 'preview',
      }
    },
    editSummary(row) {
      this.summaryDialog = {
        visible: true,
        id: row.summaryId,
        conferenceId: row.conferenceId,
        topic: row.topic,
        status: 'edit',
      }
    },
    addSummary(row) {
      this.summaryDialog = {
        visible: true,
        id: row.summaryId,
        conferenceId: row.conferenceId,
        topic: row.topic,
        status: 'add',
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'preview':
          return '查看';
        case 'edit':
          return '编辑';
        case 'add':
          return '添加';
      }
    },
    handleSizeChange(value) {
      this.queryForm.pageSize = value;
      this.fetch();
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.fetch();
    },
  },
}
</script>
<style lang="less" src="@/assets/style/ConferenceSummaryManagement.less"></style>

